import React from "react";
import { useLocation, Link } from "react-router-dom";
import { Breadcrumb } from "antd";
import routerConfig from "../AppConfig/routerConfig";
import { ArrowLeftOutlined } from "@ant-design/icons";
import "./Breadcrumbs.css";
const Breadcrumbs = () => {
  const location = useLocation();
  // 根据 location.pathname 生成面包屑
  // 先获取存在的路由配置url队列
  const pathSnippets = location.pathname.split("/").filter((i) => i);
  const urlList = [];
  pathSnippets.forEach((snippet, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join("/")}`;
    const i = routerConfig.findIndex(
      (item) => item.path.toLowerCase() === url.toLowerCase()
    );
    if (i > -1) {
      urlList.push(url);
    }
  });
  if (urlList[0].toLowerCase() !== "/home") {
    urlList.unshift("/home");
  }
  const breadcrumbItems = urlList.map((url, index) => {
    const currentRouter = routerConfig.find(
      (item) => item.path.toLowerCase() === url.toLowerCase()
    );
    return {
      title:
        index === urlList.length - 1 ? (
          currentRouter.title
        ) : (
          <Link to={url}>{currentRouter.title}</Link>
        ),
    };
  });
  const back = () => {
    window.history.back();
  };
  return (
    <div className="bread">
      <div className="bread-item bread-operation" onClick={back}>
        <ArrowLeftOutlined />
        返回
      </div>
      <div className="bread-item">
        &nbsp;|&nbsp;
        {breadcrumbItems[breadcrumbItems.length - 1].title}
      </div>
      <div className="bread-show-path">
        <Breadcrumb
          style={{ fontSize: "16px" }}
          items={breadcrumbItems}
        ></Breadcrumb>
      </div>
    </div>
  );
};

export default Breadcrumbs;
